<template>
    <div>
        <slot name="title"/>
        <table>
            <thead>
                <tr>
                    <th v-for="col in columns" :key="col.key">{{col.title}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="row in data" :key="row.key">
                    <td v-for="col in columns" :key="col.key">
                        <span v-if="!col.slot">{{ row[col.key] }}</span>
                        <slot v-else :name="col.slot" :row="row" :col="col"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        props: {
            columns: {
                type: Array,
                required: true
            },
            data: {
                type: Array,
                default: () => []
            }
        }
    }
</script>